import './App.css';
import React from 'react';
import { Grid, List, Toast } from 'antd-mobile';
import * as request from './request';
import Toolbar from "./Toolbar";
import { connect } from 'react-redux';
import Header from "./Header";
import moment from 'moment';
import ico_quxian from './static/ico_quxian.svg';
import ico_bichi from './static/ico_bichi.svg';
import ico_setting from './static/ico_setting.svg';
import ico_rili from './static/ico_rili.svg';
import ico_ability from './static/ico_ability.svg';

const apiURL = "/api/services/app/Edu_Children/Get?id=";
const Item = List.Item;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            childData: [],
        }
    }
    componentDidMount() {
        var memberId = localStorage.getItem('memberId');
        if (!memberId) {
            Toast.info('请先登录');
            this.props.history.push('/Login');
        }
        else {
            this.fetchData();
        }
    }
    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }
    fetchData = () => {
        const { currentChild } = this.props;
        let cid = this.props.match.params.childid;
        if (currentChild) {
            this.setState({ childData: currentChild })
        }
        else {
            this.getBabyData(cid)
        }
    }
    getBabyData = (cid) => {
        if (!cid) {
            cid = localStorage.getItem('childid');
        }
        if (cid) {
            request.get(apiURL + cid)
                .then((data) => {
                    this.setState({ childData: data.result })
                    this.props.dispatch({
                        type: "setCurrChild",
                        data: data.result,
                    })
                })
        }
        else {
            Toast.info('请选择宝宝');
        }
    }
    goto = (item) => {
        if (item.childid === 0) {

        }
        else {

            this.props.history.push(item.url);
        }
    }
    selectBaby = (babyData) => {
        this.setState({ babyData })
        this.getBabyData(babyData.id)
    }
    render() {
        const { childData } = this.state;
        const menus = [
            {
                icon: ico_rili,
                text: '成长日历',
                url: '/Calendar/'
            },
            {
                icon: ico_quxian,
                text: '生长曲线',
                url: '/Growth/'
            },
            {
                icon: ico_ability,
                text: '五大能力',
                url: '/BabyRadar/'
            },
            {
                icon: ico_bichi,
                text: '身高预测',
                url: '/Forecast/'
            },
            // {
            //     icon: ico_jiankang,
            //     text: '健康评测',
            //     url: '/BabyTest/'
            // },
            // {
            //     icon: ico_yimiao,
            //     text: '疫苗接种',
            //     url: '/Home/'
            // },            
            {
                icon: ico_setting,
                text: '宝宝设置',
                url: '/BabyEdit/1'
            },
        ]
        return (
            <div>
                <Header state={this.props} selectBaby={this.selectBaby} />
                <List className="my-list">
                    <Item extra={childData.name}>姓名</Item>
                    <Item extra={moment(childData.birthday).format("YYYY-MM-DD")}>出生日期</Item>
                    <Item extra={childData.sex === '男' ? '男孩' : '女孩'}>性别</Item>
                </List>
                <Grid data={menus} hasLine={false} columnNum={4} onClick={(item) => this.goto(item)} />
                <Toolbar history={this.props.history} selectedTab='ChildDtl' />
            </div>
        )
    };
}
export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
